import React, { Component } from 'react'
import lessonApi from '../../../api/lesson/index'
import {
    Table, Popconfirm, Button, message, Modal, Form,
    Select,
    Input, Upload
} from 'antd';
import { connect } from 'dva';
import lesson from '../../../api/lesson/index';

const { Option } = Select;

export default class LessonList extends Component {
    state = {
        lessonList: [],
        visible: false,
        formItemLayout: {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        },
        videoImg: '',
        columns: [
            {
                title: "id",
                dataIndex: 'id',
                key: 'id',
            },
            {
                title: "课程id",
                dataIndex: 'courseId',
                key: 'courseId',
            },
            {
                title: "课时标题",
                dataIndex: 'title',
                key: 'title',
            },

            {
                title: "课时序号",
                dataIndex: 'sort',
                key: 'sort',
            },

            {
                title: "是否免费",
                dataIndex: 'isFree',
                key: 'isFree',
            },

            {
                title: "状态",
                dataIndex: 'status',
                key: 'status',
            },
            {
                title: "课时时长",
                dataIndex: 'duration',
                key: 'duration',
            },

            {
                title: '操作',
                key: 'modify',
                render: (record) => (//record当前对象
                    <div>
                        <Popconfirm
                            title="你确定要删除这条数据吗?"
                            onConfirm={() => this.delUsers(record.id)}
                            onCancel={this.cancel}
                            okText="确认删除"
                            cancelText="取消删除"
                        >
                            <Button size='small' type='primary'>删除</Button>
                        </Popconfirm>
                        <Button style={{ marginLeft: '20px' }} size='small' type='primary' onClick={() => this.openMoal(record)}>修改</Button>
                    </div>
                ),
            },
        ]
    }
    componentDidMount() {
        console.log('6');
        this.getLessonListData();
    }
    getLessonListData = async () => {
        const { data } = await lessonApi.viewForCourse(1);
        console.log(data);
        this.setState({
            lessonList: [...data]
        })
    }
    delUsers = async (val) => {
        console.log(val, 'id')
        const data = await lessonApi.deleteLesson(val);
        if (data.code === 200) {
            this.getLessonListData();
            message.success('删除成功');
        } else {
            message.error('删除失败');
        }
    }
    cancel = (val) => {
        message.info('取消删除');
    }

    //打开模态框
    openMoal = (val) => {
        console.log(val, '修改数据');
        this.setState({ visible: true });
        if (this.ins) {
            this.ins.setFieldsValue({
                ...val
            })
        }
    }
    onFinish = async ({ id, courseId, duration, isFree, sort, status, title, video }) => {
        console.log('Received values of form: ', id, courseId, duration, isFree, sort, status, title, video);
        const data = await lesson.alterLesson({ id, courseId, duration: duration - 0, isFree, sort: sort - 0, status, title, video: this.state.videoImg });
        console.log(191991, data);
        if (data.code === 200) {
            message.success('修改成功');
        } else {
            message.error('修改失败');
        }
        this.setState({ visible: false });
        this.getLessonListData()
    };
    normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        this.setState({ fileList: e.fileList })
        return e && e.fileList;
    };
    render() {
        return (
            <div>
                LessonList
                <Table dataSource={this.state.lessonList} columns={this.state.columns} rowKey="id" />
                <Modal
                    title="修改课时数据"
                    centered
                    visible={this.state.visible}
                    onOk={() => this.setState({ visible: false })}
                    onCancel={() => this.setState({ visible: false })}
                    width={1000}
                >
                    <Form
                        name="validate_other"
                        {...this.state.formItemLayout}
                        onFinish={this.onFinish}
                        ref={ins => this.ins = ins}
                        initialValues={{
                            'input-number': 3,
                            'checkbox-group': ['A', 'B'],
                            rate: 3.5,
                        }}
                    >
                        <Form.Item >
                            <span className="ant-form-text">修改课时</span>
                        </Form.Item>


                        <Form.Item name='id' label='课时id' rules={[{ required: true, message: '请输入课时id!!' }]}>
                            <Input disabled />
                        </Form.Item>
                        <Form.Item name='courseId' label='所属课程' rules={[{ required: true, message: '请输入课程id!!' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name='title' label='课时名称' rules={[{ required: true, message: '请输入课时名称!!' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name='sort' label='课时序号' rules={[{ required: true, message: '请输入课时序号!!' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name='duration' label='课时时长' >
                            <Input />
                        </Form.Item>
                        <Form.Item name="status" label="是否上架" rules={[{ required: true, message: '请选择是否上架!!' }]}>
                            <Select placeholder="请选择是否上架">
                                <Option value="y">上架</Option>
                                <Option value="n">下架</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="isFree" label="是否免费" rules={[{ required: true, message: '请选择是否免费' }]} >
                            <Select placeholder="请选择是否免费">
                                <Option value="y">免费</Option>
                                <Option value="n">收费</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name="imgUrl"
                            label="头像"
                            valuePropName="fileList"
                            getValueFromEvent={this.normFile}
                        >
                            <Upload name="avatar"
                                // action="http://192.168.41.80:8080/users/uploadProfile"
                                listType="picture-card"
                                beforeUpload={(file, fileList) => {
                                    console.log(2020, file, fileList);
                                    this.setState({ videoImg: file.name })
                                }}
                                headers={{ token: localStorage.getItem('token') }}
                            >
                                上传
                                {/* {
                                    !fileList.length && '图片上传'
                                } */}

                            </Upload>
                        </Form.Item>
                        <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                            <Button type="primary" htmlType="submit">
                                确认修改
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal >

            </div >
        )
    }
}
